<template>
  <el-tag
    v-if="label"
    :type="tagType"
    :effect="effect"
  >
    {{ label }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface DictOption {
  label: string
  value: string | number
  type?: string
}

interface Props {
  options: DictOption[]
  value: string | number
  effect?: 'dark' | 'light' | 'plain'
}

const props = withDefaults(defineProps<Props>(), {
  effect: 'light'
})

const label = computed(() => {
  const option = props.options.find(item => item.value === props.value)
  return option?.label || ''
})

const tagType = computed(() => {
  const option = props.options.find(item => item.value === props.value)
  return option?.type || ''
})
</script>
